<template>
  <div class="gis">
    <div class="header">
      <nav-header
        @showBells="showBells"
        @hideNav="navShow = false"
        @showNav="navShow = true"
        @showAnalysis="showAnalysis"
      />
    </div>
    <!-- 隐藏和显示导航控件模块 -->
    <div
      :class="['nav-controller', navShow ? 'left' : 'right']"
      @click="navShow = !navShow"
    >
      <a-icon :type="navShow ? 'left' : 'right'"/>
    </div>
    <table-window @onSelect="onSelect" :parkShow.sync="parkShow" v-if="navShow"></table-window>
    <park-table v-if="parkShow"></park-table>
    <company-table v-if="companyShow"></company-table>
    <Map ref="gisMap" @ready="ready"/>
  </div>
</template>

<script>
  import {getTreeData} from '@/api/gis';
  import NavHeader from '@/components/dp/navHeader';
  import Map from '@/components/dp/map';
  import tableWindow from '@/components/dp/tables/tableWindow';
  import parkTable from '@/components/dp/tables/parkTable';
  import companyTable from '@/components/dp/tables/companyTable';

  export default {
    name: 'Index',
    components: {
      NavHeader,
      Map,
      tableWindow,
      parkTable,
      companyTable,
    },
    data() {
      return {
        navShow: true,
        searchTaskShow: false, // 巡查管理搜索图层状态
        searchSourceShow: false, // 巡查管理搜索图层状态
        bellsShow: false,
        analysisShow: false,
        task: [],
        event: [],
        sources: [],
        command: [],
        companyShow: true,
        parkShow: false
      };
    },
    mounted() {
    },
    methods: {
      // 展示layer
      ready() {
      },
      getTree() {
        getTreeData()
          .then((res) => {
            console.log(res);
          })
          .catch((err) => console.log(err));
      },
      showAnalysis(boolean) {
        this.analysisShow = boolean;
      },
      // 勾选显示或隐藏地图icon
      onSelect(val) {
        console.log(val, 'map-add');
        if (val.data.length == 0) return;
        let _this = this;
        _this[val.type] = val.data;
        _this.$refs.gisMap.showBillboard(val.data || [], val.type);
      },
      // 清理gis地图图标数据
      deleteSelect(val) {
        console.log(val, 'map-delete');
        this.$refs.gisMap.deleteEntity(val.type, val.data || []);
      },
      // 获取图层定位
      getLayerPosition() {
        const origin = Object.assign({}, this.dPosition);
        // 添加图层
        const _right = origin.right + 10;
        const _top = origin.top + 10;
        const position = {
          right: _right + 'px',
          top: _top + 'px'
        };
        const _origin = {
          right: _right,
          top: _top
        };
        this.setPosistion(_origin);
        return position;
      },
      // 显示告警模块
      showBells() {
        this.bellsShow = true;
        this.setZIndex(this.bellLayer.id);
      }
    }
  };
</script>

<style lang="less" scoped>
  .gis {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%;
    height: 100vh;
    background: #fff;
    position: relative;

    .header {
      width: 100%;
      height: 46px;
      top: 0;
      left: 0;
      z-index: 2;
      padding: 0;
    }

    .float {
      position: absolute;
    }

    .b-area {
      position: absolute;
      left: 24px;
      top: 105px;
      z-index: 4;
      transition: transform 0.2s linear;
      transform: translateX(0);
    }

    .hide {
      transform: translateX(-120%);
    }

    .nav-controller {
      width: 17px;
      height: 58px;
      border: 1px solid #02e0f7;
      position: absolute;
      top: 121px;
      left: 8px;
      background: #19376d;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 4;
    }

    .left {
      top: 121px;
      left: 8px;
      border-radius: 5px 0 0 5px;
    }

    .right {
      top: 121px;
      left: 0px;
      border-radius: 0 5px 5px 0;
    }
  }
</style>
